<template>
  <div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="AI智能推荐">
        <div class="box1">
          <a-checkbox-group v-model:value="AIValue">
            <a-row>
              <a-col :span="24">
                <a-checkbox value="A"
                  >有显著规律&模式的字符串
                  <a-input
                    v-model:value="formState.valueA"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
              <a-col :span="24">
                <a-checkbox value="B"
                  >随机、无规律的字符串
                  <a-input
                    v-model:value="formState.valueB"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
              <a-col :span="24">
                <a-checkbox value="C"
                  >枚举值类型中文字符串
                  <a-input
                    v-model:value="formState.valueC"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
              <a-col :span="24">
                <a-checkbox value="D"
                  >两个字段之间1-to-1关系
                  <a-input
                    v-model:value="formState.valueD"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
              <a-col :span="24">
                <a-checkbox value="E"
                  >长句子、长文本字段
                  <a-input
                    v-model:value="formState.valueE"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
              <a-col :span="24">
                <a-checkbox value="F"
                  >两个位于不同表但是等价&等同的字段&等同的字段
                  <a-input
                    v-model:value="formState.valueF"
                    placeholder="比如流水号、编号"
                  />
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="通过安全级别发现" force-render>
        分级大于等于
        <a-select
          ref="select"
          v-model:value="formState2.value"
          style="width: 250px"
          placeholder="Select a person"
        >
          <a-select-option value="">请选择安全级别</a-select-option>
          <a-select-option value="1">1级</a-select-option>
          <a-select-option value="2">2级</a-select-option>
          <a-select-option value="3">3级</a-select-option>
          <a-select-option value="3">4级</a-select-option>
        </a-select>
        的数据为敏感数据
      </a-tab-pane>
      <a-tab-pane key="3" tab="通过正则表达式发现">
        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
          <a-checkbox
            v-model:checked="checkAll"
            :indeterminate="indeterminate"
            @change="onCheckAllChange"
          >
            全部
          </a-checkbox>
        </div>
        <br />
        <a-checkbox-group v-model:value="checkedList" :options="plainOptions" />
      </a-tab-pane>
      <a-tab-pane key="4" tab="通过关键字发现">
        <div style="display: flex; align-items: center">
          关键字
          <a-input
            style="flex: 1; margin-left: 10px"
            v-model:value="formState3.value"
            placeholder="例:浙江省；杭州市；西湖区；临平区；滨江区"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <div style="text-align: right; padding: 15px 0">
      <a-button @click="search" style="margin-right: 10px" type="primary"
        >开始查找</a-button
      >
      <a-button @click="save">保存</a-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watch, getCurrentInstance } from 'vue';
const plainOptions = [
  '姓名（简体中文）',
  '身份证（中国内地）',
  '省份（中国内地）',
  '学校',
  '城市（中国内地）',
  '电话号话（中国内地）',
  '车牌号（中国内地）',
  '微信号',
  '护照号（中国内地）',
  '邮箱',
  '手机号（中国内地）',
  '宗教',
  '地址（中国内地）',
];

export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      activeKey: 1,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      AIValue: [],
      formState: {
        valueA: '',
        valueB: '',
        valueC: '',
        valueD: '',
        valueE: '',
        valueF: '',
      },
      formState2: {
        value: '',
      },
      formState3: {
        value: '',
      },
      // 正则
      indeterminate: true,
      checkAll: false,
      checkedList: [],
    });
    // 正则
    const onCheckAllChange = (e) => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
      });
    };
    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate = !!val.length && val.length < plainOptions.length;
        state.checkAll = val.length === plainOptions.length;
      }
    );
    const search = () => {
      proxy.$emit('onSearch');
    };
    const save = () => {
      proxy.$emit('onSave');
    };
    return {
      ...toRefs(state),
      onCheckAllChange,
      plainOptions,
      onCheckAllChange,
      search,
      save,
    };
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  :deep(.ant-checkbox-wrapper) {
    display: flex;
    width: 100%;
    align-items: center;
    span:nth-child(2) {
      flex: 1;
      display: flex;
      align-items: center;
      .ant-input {
        flex: 1;
        border-top: none;
        border-left: none;
        border-right: none;
        margin-left: 10px;
        &:active,
        &:focus {
          outline: none;
          box-shadow: 0 0 0;
        }
      }
    }
  }
}
</style>